import Vue from 'vue'
import loadingUrl from '../assets/loading.gif'
import errorUrl from '../assets/error.jpg'
// 自定义指令
Vue.directive('lazy', {
  // 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
  bind(el) {
    el.src = loadingUrl
  },
  // 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
  // el：指令所绑定的元素，可以用来直接操作 DOM。
  // binding：一个对象，包含以下 property：
  //     value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
  inserted(el, binding) {
    const img = new Image()
    img.src = binding.value

    img.addEventListener('load', () => {
      setTimeout(() => {
        el.src = binding.value
      }, Math.random() * 3000);
    })

    img.addEventListener('error', () => {
      el.src = errorUrl
    })
  },
  // 只调用一次，指令与元素解绑时调用。
  unbind() {

  }
})


Vue.directive('draggle', {
  inserted(el) {
    let pos = {}

    function handleDown(e) {
      pos = {
        x: e.offsetX,
        y: e.offsetY
      }
      el.style.position = "absolute"
      e.preventDefault()

      document.addEventListener('mousemove', handleMove)
      document.addEventListener('mouseup', handleUp)
    }

    function handleMove(e) {
      el.style.left = e.pageX - pos.x + 'px'
      el.style.top = e.pageY - pos.y + 'px'
    }

    function handleUp() {
      document.removeEventListener('mousemove', handleMove)
      document.removeEventListener('mouseup', handleUp)
    }

    el.addEventListener('mousedown', handleDown)
  }
})